import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
// import { List, Button, MessagePlugin } from 'tdesign-react'
import { Table, MessagePlugin, Button, Tag, Popconfirm } from 'tdesign-react'
import { EditIcon, CheckCircleFilledIcon, CloseCircleFilledIcon, MenuUnfoldIcon, DeleteIcon } from 'tdesign-icons-react'
import { useTranslation } from 'react-i18next'
import { ApiRequest, apis } from '@/service'
import styles from './index.module.less'
import TableOperateButton from '@/components/Table/TableOperateButton'

const {
  getBugList,
  deleteBugItem,
} = apis.BMService.test

// const { ListItem, ListItemMeta } = List

const ShowBugs = () => {

  const { t } = useTranslation(["bugManager"])
  const navigate = useNavigate()
  const [tableData, setTableData] = useState([])
  const [total, setTotal] = useState<number>(0)

  const columns = [
    {
      colKey: 'title',
      title: t(`test.title`),
    },
    {
      colKey: 'steps',
      title: t(`test.steps`),
    },
    {
      colKey: 'owner',
      title: t(`test.owner`),
    },
    {
      colKey: 'creator',
      title: t(`test.creator`),
    },
    {
      colKey: 'createTime',
      title: t(`test.createTime`),
      width: 80,
      ellipsis: true,
    },
    {
      colKey: 'isOverdue',
      title: t(`test.isOverdue`),
      width: 80,
      cell: ({ row }: { row: any }) => (
        <Tag
          shape="round"
          theme={statusNameListMap[row.isOverdue]?.theme}
          variant="light-outline"
          icon={statusNameListMap[row.isOverdue]?.icon}
        >
          {statusNameListMap[row.isOverdue]?.label}
        </Tag>
      ),
    },
    {
      colKey: 'priority',
      title: t(`test.priority`),
    },
    {
      colKey: 'operate',
      title: t(`test.operate`),
      cell: ({ row }: { row: any }) => (
        <div className='tdesign-table-demo__table-operations'>
          <TableOperateButton Icon={<EditIcon />} onClick={() => { toEditBugItem(row) }} />
          <TableOperateButton Icon={<MenuUnfoldIcon />} onClick={() => { toShowBugDetail(row) }} />
          <Popconfirm
            content="确认删除吗"
            destroyOnClose
            placement="top"
            showArrow
            theme="default"
            onConfirm={() => { toDeleteBugItem(row) }}
          >
            <>
              <TableOperateButton Icon={<DeleteIcon />} />
            </>
          </Popconfirm>
        </div>
      )
    }
  ]

  const statusNameListMap: any = {
    0: { label: '未超期', theme: 'success', icon: <CheckCircleFilledIcon /> },
    1: { label: '已超期', theme: 'danger', icon: <CloseCircleFilledIcon /> },
  }

  useEffect(() => {
    queryTableData()
  }, [])

  const queryTableData = () => {
    const params = {}
    ApiRequest({ api: getBugList, params }).then((res: any) => {
      const { code = 'error', data = [], note = '', total = 50 } = res
      if (code > 0) {
        setTableData(data)
        setTotal(total)
      } else {
        MessagePlugin.error(note, 2000)
      }
    })
  }

  const toEditBugItem = (item: any) => {
    navigate('/aio/bug-manager/test/create-bug', {
      state: {
        id: item.id
      }
    })
  }

  const toShowBugDetail = (item: any) => {
    navigate('/aio/bug-manager/test/bug-detail', {
      state: {
        id: item.id,
      }
    })
  }

  const toDeleteBugItem = (item: any) => {
    let params = {
      id: item.id
    }
    ApiRequest({ api: deleteBugItem, params: params }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code > 0) {
        MessagePlugin.success(note || '删除成功', 2000)
      } else {
        MessagePlugin.error(note || '删除失败', 2000)
      }
    })
    queryTableData()
  }

  return <div className={styles.showBugs}>
    <Table
      className='bm-table'
      data={tableData}
      columns={columns}
      rowKey={'id'}
      verticalAlign={'top'}
      bordered={true}
      showHeader={true}
      tableLayout={'auto'}
      rowClassName={({ rowIndex }) => `${rowIndex}-class`}
      cellEmptyContent={'--'}
      resizable={false}
      size='small'
      loading={tableData.length ? false : true}
      pagination={{
        defaultCurrent: 1,
        defaultPageSize: 10,
        total,
        showJumper: true,
        size: 'small',
        onChange(pageInfo) {
          console.log(pageInfo, 'onChange pageInfo');
        },
        onCurrentChange(current, pageInfo) {
          console.log(current, pageInfo, 'onCurrentChange current');
        },
        onPageSizeChange(size, pageInfo) {
          console.log(size, pageInfo, 'onPageSizeChange size');
        },
      }}
      onPageChange={(pageInfo) => {
        console.log(pageInfo, 'onPageChange');
      }}
      onRowClick={({ row, index, e }) => {
        console.log('onRowClick', { row, index, e });
      }}
    />
  </div>

}

export default ShowBugs
